<template>
  <div class="custom-input2">
    <span>{{label}}</span>
    <input :type="type" :value="value" :placeholder="placeholder" @input="$emit('input', $event.target.value)">
    <f7-button v-if="smsCode" :disabled="smsStatus" @click="$emit('send')">{{smsStatus?curCount:'发送验证码'}}</f7-button>
  </div>
</template>

<script>
  export default {
    name: "input2",
    data() {
      return {
        curCount: this.count
      }
    },
    props: {
      value: [String, Number],
      type: {
        type: String,
        default: 'text'
      },
      placeholder: String,
      label: String,
      smsCode: Boolean,
      smsStatus: Boolean,
      count: {
        type: Number,
        default: 60
      }
    },
    watch: {
      smsStatus(newv) {
        if (newv) this.startCountDown()
      }
    },
    methods: {
      startCountDown() {
        console.log('开始')
        let timeId = setInterval(() => {
          this.curCount--;
          if(this.curCount === 0) {
            this.curCount = this.count;
            this.$emit('update:smsStatus', false)
            clearInterval(timeId);
          }
        }, 1000)
      }
    }
  }
</script>

<style scoped lang="scss">
  .custom-input2 {
    color: $mainColor;
    border: 1px solid $mainColor;
    border-radius: $radius;
    height: 90px;
    font-size: 24px;
    display: flex;
    align-items: center;
    span {
      color: $mainColor;
      display: block;
      /*padding: 0 30px;*/
      min-width: 156px;
      text-align: center;
      border-right: 1px solid $mainColor;
    }
    .button {
      color: $mainColor;
      margin-right: 20px;
      width: 150px;
      padding: 0;
    }
    input {
      flex: 1;
      height: 100%;
      padding: 0 $padding;
    }
    input::-webkit-input-placeholder { /* WebKit browsers 适配谷歌 */
      color: #336881;
    }
    input:-moz-placeholder { /* Mozilla Firefox 4 to 18 适配火狐 */
      color: #336881;
    }
    input::-moz-placeholder { /* Mozilla Firefox 19+ 适配火狐 */
      color: #336881;
    }
    input:-ms-input-placeholder { /* Internet Explorer 10+  适配ie*/
      color: #336881;
    }
  }
</style>